<template>
	<view class="">
		<k-navbar title="轨迹红包详情"></k-navbar>
		<u-popup v-model="show" width="80%" mode="center" border-radius="14">
			<view class="warp">
				<view class="header">
					<view class="">商家运动轨迹</view>
					<view style="font-size: 50rpx;margin-top: 20rpx;">红包规则</view>
				</view>
				<view class="detail">
					<view class="">①用户需到商家的门店。</view>
					<view class="">②打开快步APP，找到“我的”页面。</view>
					<view class="">③左上角点击“扫一扫”按钮，扫码商家活动二维码。</view>
					<view>④领取的糖果将直接存入您的快步糖余额。</view>
				</view>
			</view>
		</u-popup>
		<map style="width: 100%; height: 500px;" id="map1" ref="map1"></map>
		<view class="actions">
			<image src="../../static/businessDistrict/acivityDetail.png" mode=""  @click="show = !show"></image>
			<!-- <image src="../../static/businessDistrict/recomend.png" mode=""></image> -->
		</view>
		<view class="content-box">
			<view class="pannel info">
				<view class="">商家名称：{{detail.businessName}}</view>
				<view class="">商家位置：{{detail.address}}</view>
				<view class="">活动名称：{{detail.activityName}}</view>
				<view class="">到期时间：{{detail.expireDate}}</view>
				<view class="">该商家距您：{{detail.distance}}</view>
			</view>
			<view class="pannel">
				<view class="title">推荐商品：</view>
				<image v-for="(item,index) in detail.activityProductRelationDtos" :src="item.url" mode="" style="width:97rpx;height:97rpx"></image>
			</view>
			<view style="margin: 20rpx auto;text-align: center;">
				<u-button type="warning" shape="circle" @click="mapShow = true" size="medium">导航到店</u-button>
			</view>
		</view>
		<openThirdMap :show="mapShow" :latitude="params.latitude" :longitude="params.longitude" :name="params.name" @success="mapShow = false"/>
	</view>
</template>

<script>
import kNavbar from '@/components/navbar/index'
import openThirdMap from '@/components/map/openThirdMap.vue'
export default {
	components: {
		kNavbar,
		openThirdMap
	},
	data() {
		return {
			mapShow: false,
			show: false,
			params: {},
			detail: {}
			
		}
	},
	onLoad(option) {
		this.params = JSON.parse(option.detail)
		this.getData()
	},
	methods: {
		getData() {
			this.$u.api.activityDetails(this.params).then(res => {
				if (res.code == 0) {
					this.detail = res.data;
				} else {
					uni.showToast({
						icon:'none',
					    title: res.msg
					});
				}
			})
		},
	}
}
</script>

<style lang="scss" scoped>
	.content-box {
		position: fixed;
		z-index: 10;
		bottom: 0;
		left: 0;
		padding: 30rpx;
		// height: 50vh;
		width: 100%;
		background-color: rgba(0,0,0,0.5);
		.pannel {
			padding: 20rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
		}
		.info {
			margin-bottom: 20rpx;
			line-height: 40rpx;
		}
		.title {
			margin-bottom: 20rpx;
		}
	}
	.actions {
		position: fixed;
		top: 150rpx;
		right: 30rpx;
		image {
			display: block;
			width: 128rpx;
			height: 128rpx;
		}
	}
	.warp {
		.header {
			padding: 50rpx 30rpx 20rpx 50rpx;
			background: linear-gradient(to right, #FF6801, #FF9832);
			color: #FFFFFF;
		}
		.detail {
			background-color: #FFFFFF;
			padding: 60rpx 50rpx;
		}
	}
</style>
